<template>
  <div class="table">
    <div class="container shadow rounded">
      <div class="handle-box">
        <el-select
          clearable
          v-model="form.did"
          placeholder="筛选部门"
          class="handle-select mr10"
        >
          <el-option
            :label="item.name"
            :value="item.id"
            v-for="(item, index) of departmentList"
            :key="index"
          ></el-option>
        </el-select>
        <el-select
          clearable
          v-model="form.rid"
          placeholder="筛选会议室"
          class="handle-select mr10"
        >
          <el-option
            :label="item.name"
            :value="item.id"
            v-for="(item, index) of meetingRoomList"
            :key="index"
          ></el-option>
        </el-select>
        <el-date-picker
          type="date"
          placeholder="筛选日期"
          v-model="form.date"
          value-format="yyyy-MM-dd"
        ></el-date-picker>
        <el-button plain icon="search" @click="search">查询</el-button>
        <el-button plain icon="searchAll" @click="searchAll"
          >全部</el-button
        >
      </div>
      <el-table :data="page" border class="table">
        <el-table-column
          type="text"
          align="center"
          label="会议室名称"
          prop="roomName"
        ></el-table-column>
        <el-table-column
          type="text"
          align="center"
          label="会议主题"
          prop="topic"
        ></el-table-column>
        <el-table-column
          type="text"
          align="center"
          label="会议开始时间"
          prop="startTime"
        ></el-table-column>
        <el-table-column
          type="text"
          align="center"
          label="会议结束时间"
          prop="endTime"
        ></el-table-column>
        <el-table-column
          type="text"
          align="center"
          label="参会者"
          prop="participants"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              icon="el-icon-view"
              @click="showParticipate(scope.row)"
              >查看</el-button
            >
          </template>
        </el-table-column>
        <el-table-column
          type="text"
          align="center"
          label="预定者"
          prop="reserveUid"
        >
        </el-table-column>
        <el-table-column
          type="text"
          align="center"
          label="预定者部门"
          prop="reserveDid"
        ></el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page="this.cur_page"
          layout="prev, pager, next"
          :total="total"
        >
        </el-pagination>
        <div style="float: right;margin-top: -22px;margin-right: 178px;">
          共{{ this.total }}条
        </div>
      </div>
    </div>
    <el-dialog
      title="参与者"
      :visible.sync="showParticipants"
      :before-close="handleDialogClose"
      width="300px"
      center
    >
      <ul class="member-list">
        <li
          class="member-item"
          v-for="(item, index) of this.participants"
          :key="index"
        >
          <div class="member-index">{{ index + 1 }}</div>
          <img :src="item.img || '../../../../static/img/userImg.jpg'" />
          <div class="member-name">{{ item.name || "未命名" }}</div>
        </li>
        <li style="margin-left: 80px" v-show="this.participants.length === 0">
          无参与者
        </li>
      </ul>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "Table",
  data() {
    return {
      url: "http://119.23.110.183:8080",
      tableData: [],
      pageData: [],
      page: [],
      cur_page: 1,
      participants: [],
      showParticipants: false,
      departmentList: [],
      meetingRoomList: [],
      form: {
        date: "",
        did: null,
        rid: null
      },
      idx: -1,
      total: 0
    };
  },
  activated: function() {
    this.init();
  },
  methods: {
    init: function() {
      this.getMeetingRooms();
      this.getDepartments();
      this.searchAll();
    },
    getMeetingRooms() {
      axios.defaults.headers.common["Authorization"] = this.$store.state.token;
      axios.post(this.url + "/getMeetingRoomList").then(res => {
        res = res.data;
        const _this = this;
        if (res.code === 0) {
          _this.meetingRoomList = []
          const data = res.data;
          const list = data.meetingRooms;
          for (let i = 0; i < list.length; i++) {
            _this.meetingRoomList.push({
              id: list[i].roomId,
              name: list[i].roomName
            });
          }
        }
      });
    },
    getDepartments() {
      axios.defaults.headers.common["Authorization"] = this.$store.state.token;
      axios.post(this.url + "/getDepartments", { oid: 5 }).then(res => {
        res = res.data;
        const _this = this;
        if (res.code === 0) {
          _this.departmentList = []
          const data = res.data;
          const list = data.Departments;
          for (let i = 0; i < list.length; i++) {
            _this.departmentList.push({
              id: list[i].departmentId,
              name: list[i].departmentName
            });
          }
        }
      });
    },
    handleCurrentChange(val) {
      this.cur_page = val;
      this.getData(val);
    },
    search() {
      // this.form.date = ''
      // this.form.did = null
      // this.form.rid = null
      this.page = [];
      this.pageList = [];
      this.tableData = [];
      this.pageData = [];
      const _this = this;
      axios.defaults.headers.common["Authorization"] = this.$store.state.token;
      axios
        .post(
          this.url +
            "/getMeetingInfoByCondition?date=" +
            this.form.date +
            "&did=" +
            this.form.did +
            "&rid=" +
            this.form.rid
        )
        .then(res => {
          res = res.data;
          this.tableData = res.data.list;
          this.total = this.tableData.length;
          const length = this.total;
          const data = this.tableData;
          const pageD = this.pageData;
          const pageNum = this.total / 10;
          for (let i = 0; i < pageNum; i++) {
            let page = {};
            page.pagen = i;
            let pageList = [];
            for (let j = 0; j < 10; j++) {
              if (i * 10 + j + 1 > length) {
                break;
              }
              axios
                .post(
                  _this.url + "/getUserinfo?id=" + data[i * 10 + j].reserveUid
                )
                .then(res => {
                  res = res.data;
                  if (res.code === 0) {
                    const userinfo = res.data.userinfo;
                    data[i * 10 + j].startTime = data[i * 10 + j].startTime
                      .substring(0, 16)
                      .replace(/T/g, "\n");
                    data[i * 10 + j].endTime = data[i * 10 + j].endTime
                      .substring(0, 16)
                      .replace(/T/g, "\n");
                    data[i * 10 + j].reserveUid = userinfo.name;
                    data[i * 10 + j].reserveDid = userinfo.departmentName;
                    data[i * 10 + j].topic =
                      data[i * 10 + j].topic === null
                        ? "默认"
                        : data[i * 10 + j].topic;
                  }
                });
              pageList.push(data[i * 10 + j]);
              page.pageList = pageList;
            }
            pageD.push(page);
          }
          this.handleCurrentChange(1);
        });
    },
    searchAll() {
      const _this = this;
      this.form.date = "";
      this.form.did = null;
      this.form.rid = null;
      this.page = [];
      this.pageList = [];
      this.tableData = [];
      this.pageData = [];
      axios.defaults.headers.common["Authorization"] = this.$store.state.token;
      axios
        .post(
          this.url +
            "/getMeetingInfoByCondition?date=" +
            this.form.date +
            "&did=" +
            this.form.did +
            "&rid=" +
            this.form.rid
        )
        .then(res => {
          res = res.data;
          this.tableData = res.data.list;
          this.total = this.tableData.length;
          const length = this.total;
          const data = this.tableData;
          const pageD = this.pageData;
          const pageNum = this.total / 10;
          let promises = []; // hzh add....
          for (let i = 0; i < pageNum; i++) {
            let page = {};
            page.pagen = i;
            let pageList = [];
            for (let j = 0; j < 10; j++) {
              if (i * 10 + j + 1 > length) {
                break;
              }
              promises.push(
                axios
                  .post(
                    _this.url + "/getUserinfo?id=" + data[i * 10 + j].reserveUid
                  )
                  .then(res => {
                    res = res.data;
                    if (res.code === 0) {
                      const userinfo = res.data.userinfo;
                      data[i * 10 + j].startTime = data[i * 10 + j].startTime
                        .substring(0, 16)
                        .replace(/T/g, "\n");
                      data[i * 10 + j].endTime = data[i * 10 + j].endTime
                        .substring(0, 16)
                        .replace(/T/g, "\n");
                      data[i * 10 + j].reserveUid = userinfo.name;
                      data[i * 10 + j].reserveDid = userinfo.departmentName;
                      data[i * 10 + j].topic =
                        data[i * 10 + j].topic === null
                          ? "默认"
                          : data[i * 10 + j].topic;
                    }
                  })
              );
              pageList.push(data[i * 10 + j]);
              page.pageList = pageList;
            }
            pageD.push(page);
          }
          // hzh add....
          Promise.all(promises).then(() => {
            this.handleCurrentChange(1);
          });
          // this.handleCurrentChange(1);
          // window.setTimeout(() => {
          //   this.handleCurrentChange(1);
          // }, 1000);
        });
    },
    getData(val) {
      this.page = this.pageData[val - 1].pageList;
    },
    showParticipate(row) {
      const list = row.participants;
      this.showParticipants = true;
      const _this = this;
      for (let i = 0; i < list.length; i++) {
        axios.defaults.headers.common[
          "Authorization"
        ] = this.$store.state.token;
        axios.post(_this.url + "/getUserinfo?id=" + list[i]).then(res => {
          res = res.data;
          if (res.code === 0) {
            const data = res.data.userinfo;
            _this.participants.push({
              name: data.name,
              img: data.imagePath
            });
          }
        });
      }
    },
    handleDialogClose() {
      this.showParticipants = false;
      this.participants = [];
    }
  }
};
</script>

<style lang="stylus" scoped>
.container {
  margin-left: 170px;
  margin-top: 85px;
  padding: 10px;
  background: #fff;
  //border-radius: 5px;
}
.pagination {
  margin: 26px;
  text-align: right;
  margin-top: -10px;
}

.el-table tr:hover {
  background: #f6faff;
}
.handle-box {
  margin-top: 15px;
  margin-left: 20px;
  margin-bottom: -25px;
}

  .handle-select {
      width: 120px;
  }

  .handle-input {
      width: 300px;
      display: inline-block;
  }
  .table{
    margin: 45px 20px;
    width: 95%;
    font-size: 14px;
  }
  .mr10{
      margin-right: 10px;
  }
.member-list {
  width: 90%;
  margin: 0 auto;
  padding: 10px;
}
.member-item {
  width: 200px;
  height: 55px;
  margin 0 auto
  background: #efefef;
  line-height: 55px;
  margin-bottom: 15px;
  padding-left: 10px;
  border-radius: 3px;
}
.member-index {
  float: left;
}
.member-name{
  float: left;
  margin-left 20px
}
.member-item img {
  width: 45px;
  height: 45px;
  float: left;
  border-radius: 50%;
  margin-left: 20px;
  margin-top 5px
 }
.member-item > span:not(:first-child)
  margin-left 50px
.member-item > span:first-child
  margin-left 30px
</style>
